<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://eureka.yigolden.net/stringutils/sutaglib/1.0" prefix="su"%>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>发送邮件</title>
    <!-- Bootstrap core CSS -->
    <link href="<%=request.getContextPath() %>/static/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="<%=request.getContextPath() %>/static/css/signin.css" rel="stylesheet">
    <link href="<%=request.getContextPath() %>/static/css/summernote.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="<%=request.getContextPath() %>/static/js/html5shiv.min.js"></script>
      <script src="<%=request.getContextPath() %>/static/js/respond.min.js"></script>
    <![endif]-->

  </head>

  <body>
<jsp:include page="../Common/navHeader.jsp"></jsp:include>
  <div class="container">
	<h1 style="font-family:华文行楷;" >好室友<small>网</small> </h1>
    <div class="row">
		<div class="col-xs-1 col-sm-2">
		</div>
		<div class="col-xs-10 col-sm-8"> 
		<form id="emailForm" action="<%=request.getContextPath() %>/Mail/SendEmail" method="POST">
		  	<div class="row" style="padding: 0px;">
		  		
				<div class="form-group">
					<div class="col-xs-6" style="padding-left:0px;padding-right:0px">
					<label style="display:inline">发件人：</label>
					<input style="display:inline" type="text" class="form-control" id="from" name="from" placeholder="发件人……">
				</div>
				<div class="col-xs-6"></div>
				</div>
				
	 		</div>
			<div class="row" style="padding: 0px;">
				
				<div class="form-group">
				<div class="col-xs-6" style="padding-left:0px;padding-right:0px">
					<label style="display:inline">收件人：</label>
					<input style="display:inline" type="text" class="form-control" id="to" name="to" placeholder="收件人……">
				</div>
				<div class="col-xs-6"></div>
				</div>
				
			</div>
	  		<div class="row">
	  			
  				<div class="form-group">
  					<label style="display:inline">主题：</label>
  					<input style="display:inline" type="text" class="form-control" id="subject" name="subject" placeholder="主题……">
  
  				</div>
	
			</div>  
	  		
	  		<div class="row">
	  			<div class="form-group">
	  				<div class="summernote" id="summernote"></div>
	  				<input type="hidden" id="content" name="content"/>
	  			</div>
	  		</div>
			<div class="row">
				<div class="form-group">
					<label for="uploadFile" style="display:inline;">上传附件： </label>
					<input type="file" name="uploadFile" id="uploadFile" style="display:inline;"/>
				</div>			
			</div>
			<div class="row">
		  		<div class="form-group">
		  			<div class="col-xs-12 text-center" style="margin-top:20px">
		      			<div class="col-xs-6 text-right" style="display:inline">
		     				 <button type="submit" id="btnsubmit" class="btn btn-success">确认发送</button>
		     		    </div>
		      			<div class="col-xs-6 text-left" style="display:inline">
		      				<button type="reset" class="btn btn-warning">重新填写</button>
		      			</div>
		  			</div>
		  		</div>
	  		</div>
  		</form>
		<div class="row">
			<div class="form-group">
	    		<c:if test="${errorCode eq 0 }">
	          		<div class="alert alert-warning" role="alert" id="alert-warning">输入信息不完整！</div>
	        	</c:if>
	        	<c:if test="${errorCode eq 1 }">
	          		<div class="alert alert-warning" role="alert" id="alert-warning">发送成功！</div>
	        	</c:if>
	        	<c:if test="${errorCode eq 2 }">
	          		<div class="alert alert-warning" role="alert" id="alert-warning">发送失败！</div>
	        	</c:if>
			</div>
		</div>
        <input type="hidden" name="referrer" value="${su:encodeUriComponent(referer) }" />
      </div>
      <div class="col-xs-1 col-sm-2"></div>
     </div>
    </div> <!-- /container -->
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="<%=request.getContextPath() %>/static/js/ie10-viewport-bug-workaround.js"></script>
    <script src="<%=request.getContextPath() %>/static/js/jquery.min.js" ></script>
    <script src="<%=request.getContextPath() %>/static/js/bootstrap.min.js"></script> 
	<script src="<%=request.getContextPath() %>/static/js/summernote.min.js" ></script>
	<script src="<%=request.getContextPath() %>/static/js/summernote-zh-CN.js" ></script>
	<script>
		function validateForm(){
			var from = document.getElementById("from");
			var to = document.getElementById("to");
			var subject = document.getElementById("subject");	
			if(from.value==""){
				alert("发件人不能为空！");
				from.focus();
				return false;
			}
			
			if(to.value==""){
				alert("发件人不能为空！");
				to.focus();
				return false;
			}
			
			if(subject.value==""){
				alert("主题不能为空！");
				subject.focus();
				return false;
			}		
			if($('#summernote').summernote('isEmpty')){
				alert("邮件内容不能为空！");
				content.focus();
				return false;
			}
			if($('#summernote').summernote('code').length>10000){
				alert("邮件内容超过10000，请适当精简！");
				content.focus();
				return false;
			}
			return true;
		}

		$(document).ready(function() {
		    $('#summernote').summernote({
		        height: 200,
		        minHeight: 200,
		        lang: 'zh-CN',
		        placeholder: '请介绍你们的宿舍吧！',
		        toolbar: [
		                  ['style', ['bold', 'italic', 'underline', 'clear']],
		                  ['font', ['strikethrough', 'superscript', 'subscript']],
		                  ['color', ['color']],
		                  ['para', ['ul', 'ol', 'paragraph']]
		                ]
		    });
		    $('#emailForm').submit(function(){
		    	if(!validateForm())
		    		return false;
		    	$('#content').val($('#summernote').summernote('code'));
		    	return true;
		    });  
		});
		
		
	</script>
  </body>
</html>